<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>博客详情页</title>
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="CSS/blogDetail.css">
    <link rel="stylesheet" href="layui-v2.8.0/layui/css/layui.css">
    <script src="js/app.js"></script>
    <script src="js/jquery.min.js"></script>
    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <style>
        .layui-row{
            height: 50px;
            background-color: rgba(255,255,255,0.8);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
<!--导航栏-->
<div class="layui-row">
    <div class="layui-col-md7">
        <div class="grid-demo grid-demo-bg1">
            <div>
                <img src="images/logo.png" alt="">
                <span>个人博客系统</span>
            </div>
        </div>
    </div>
    <div class="layui-col-md1">
        <div class="grid-demo grid-demo-bg1">
            <img src="images/author.png" alt="">
            <span id="author">未登录</span>
        </div>
    </div>
    <div class="layui-col-md1">
        <div class="grid-demo grid-demo-bg1">
            <a href="blogList.html">
                <img src="images/collect.png" alt="">
                <span>博客列表</span>
            </a>
        </div>
    </div>

    <div class="layui-col-md1">
        <div class="grid-demo grid-demo-bg1">
            <a href="blogEdit.html">
                <img src="images/write.png" alt="">
                <span>发布博客</span>
            </a>
        </div>
    </div>

    <div class="layui-col-md1">
        <div class="grid-demo grid-demo-bg1">
            <a href="#" id="delete">
                <img src="images/delete.png" alt="">
                <span>删除</span>
            </a>
        </div>
    </div>
    <div class="layui-col-md1">
        <div class="grid-demo grid-demo-bg1">
            <a href="logout">
                <img src="images/logout.png" alt="">
                <span>退出登录</span>
            </a>
        </div>
    </div>
</div>
</div>


<!--内容-->
<div class="container">
    <!--标题 -->
    <div class="title">

    </div>
    <!--时间 -->
    <div class="date">

    </div>
    <!--正文 -->
    <div id="content">

    </div>
</div>
<script>
    function getBlog() {
        $.ajax({
            type: 'get',
            url: 'blog' + location.search,
            success: function (body) {
                let title = document.querySelector('.title');
                title.innerHTML = body.title;

                let date = document.querySelector('.date');
                date.innerHTML = body.postTime;

                // let content = document.querySelector('#content');
                // content.innerHTML = body.content;

                // 使用markdown进行渲染
                editormd.markdownToHTML('content',{markdown: body.content});
            }
        });
    }
    getBlog();

    getLoginStatus();

    function getUserInfo() {
        $.ajax({
            type: 'get',
            url: 'userInfo'+ location.search,
            success: function (body) {
                let span = document.querySelector("#author");
                span.innerHTML = body.username;
            }
        });
    }

    getUserInfo();

    function blogDelete() {
        let deleteBtn = document.querySelector('#delete');
        deleteBtn.href = 'blogDelete'+ location.search;
    }

    blogDelete();

    function userInfo(){
        $.ajax({
            type: 'get',
            url: 'userInfo',
            success: function (body){
                // 获取成功就是user对象,将user对象添加到页面上
                let user = document.querySelector('#user');
                user.innerHTML = body.username;
            }
        });
    }
    userInfo();
</script>
</body>

</html>